<script minify>
App.component('CopyLine', ({ text }) => {
    return {
        $template: '#copy-line-template',
        get text() { return text() },
        copied: false,
        copy(text) {
            this.copied = true
            let $el = document.createElement("textarea")
            $el.innerHTML = enc(text)
            document.body.appendChild($el)
            $el.select()
            document.execCommand("copy")
            document.body.removeChild($el)
            setTimeout(() => this.copied = false, 3000)
        },
    }
})
</script>
<template id="copy-line-template">
<div class="flex cursor-pointer" @click="copy(text)">
    <div class="flex-grow bg-gray-700">
        <div class="pl-4 py-1 text-lg align-middle text-white">{{text}}</div>
    </div>
    <div class="flex">
        <div class="bg-sky-500 text-white p-1 py-1.5">
            <svg v-if="copied" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            <svg v-else class="w-6 h-6" title="copy" fill='none' stroke='white' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
                <path stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='M8 7v8a2 2 0 002 2h6M8 7V5a2 2 0 012-2h4.586a1 1 0 01.707.293l4.414 4.414a1 1 0 01.293.707V15a2 2 0 01-2 2h-2M8 7H6a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2v-2'></path>
            </svg>
        </div>
    </div>
</div>
</template>
